<template>
  <div class="screen-wrapper">
    <div id="screen">
      <div class="main" id="main">
        <div v-for="index in ballsArray" :key="index" class="ball">
          {{ index + 1 }}
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup lang="ts">
import { ref, onMounted } from "vue";
import pageAuto from "@/utils/tools/newScreenAuto";

// 定义控制变量
const ballsCount = ref(8); // 旋转的数量
const speed = ref(0.003); // 动画的速度
const horizontalDistance = ref(1000); // 左右距离
const verticalDistance = ref(450); // 上下距离
let isPaused = false; // 控制动画是否暂停

const ballsArray = Array.from({ length: ballsCount.value }, (_, i) => i); // 动态生成ball的数量

function start() {
  const balls = document.querySelectorAll(".ball");
  const mainElement = document.querySelector(".main");
  const centerX = (mainElement!.clientWidth - balls[0].clientWidth) / 2; // main元素的水平中心 需要减掉单个balls的宽度
  const centerY = (mainElement!.clientHeight - balls[0].clientHeight) / 2; // main元素的垂直中心

  let angle = 0; // 初始角度

  // 动画函数
  const animateBalls = () => {
    if (!isPaused) {
      balls.forEach((ball: any, index) => {
        // 动态计算每个ball的角度（均分圆周）
        const ballAngle = angle + index * ((2 * Math.PI) / balls.length);

        // 使用相同的 horizontalDistance 和 verticalDistance 控制水平和垂直方向的距离
        const x =
          centerX + (horizontalDistance.value / 2) * Math.cos(ballAngle); // 水平位置
        const y = centerY + (verticalDistance.value / 2) * Math.sin(ballAngle); // 垂直位置

        // 计算缩放比例：最下方时最大，最上方时最小
        const scale = 0.5 + 0.4 * (y / verticalDistance.value); // 根据y轴位置设置scale

        // 根据ball的位置设置透明度
        const opacity =
          0.1 +
          ((y + verticalDistance.value / 2) / verticalDistance.value) * 0.5;

        // 应用位置、透明度和缩放
        ball.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
        ball.style.opacity = opacity.toString(); //如果需要增加透明度
      });

      // 增加角度，控制速度
      angle += speed.value;
    }

    // 使用requestAnimationFrame实现平滑动画
    requestAnimationFrame(animateBalls);
  };

  // 鼠标移入事件：暂停动画，放大当前ball
  balls.forEach((ball: any) => {
    ball.addEventListener("mouseenter", () => {
      isPaused = true;
      ball.style.transform += " scale(1.1)"; // 缩放效果
    });

    // 鼠标移出事件：恢复动画，移除放大效果
    ball.addEventListener("mouseleave", () => {
      isPaused = false;
      ball.style.transform = ball.style.transform.replace(" scale(1.1)", ""); // 取消放大效果
    });
  });

  // 开始动画
  requestAnimationFrame(animateBalls);
}

onMounted(() => {
  start();
  const screen = document.getElementById("screen");
  console.log("screen", screen);

  if (screen) {
    window.addEventListener("resize", () => pageAuto(960, 540, screen));
  }
});
</script>
  
  <style lang="scss" scoped>
.screen-wrapper {
  height: 100%;
  width: 100%;
  background-color: #ccc;
  position: relative;
  background: url("../../assets/img/bg_screen.jpg") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: relative;
  #screen {
    width: 960px;
    height: 540px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .main {
    width: 100%;
    height: 100%;
    position: relative;
    .ball {
      position: absolute;
      width: 150px;
      height: 150px;
      transform-origin: center;
      transition: transform 0.2s ease, opacity 0.2s ease; /* 让缩放和透明度过渡更平滑 */
      background-color: greenyellow;
      border-radius: 50%;
      line-height: 150px;
      text-align: center;
      font-size: 2rem;
      color: red;
    }
  }
}
</style>